﻿<!DOCTYPE html>
@{
    Layout = null;
}
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <title>:: Picxa :: A Photographer Portfolio Template</title>
    <link href="/css/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/css/gallery/foundation.min.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="/css/gallery/set1.css" />
    <!-- Main Style -->
    <link rel="stylesheet" href="/css/main.css" type="text/css">    <!-- jQuery -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/assets/jquery.min.js" type="text/javascript"></script>
    <script src="/js/assets/bootstrap.min.js" type="text/javascript"></script>
    <script src="/js/gallery/masonry.pkgd.min.js" type="text/javascript"></script>
    <script src="/js/gallery/imagesloaded.pkgd.min.js" type="text/javascript"></script>
    <script src="/js/gallery/jquery.infinitescroll.min.js" type="text/javascript"></script>
    <script src="/js/gallery/main.js" type="text/javascript"></script>
    <script src="/js/jquery.nicescroll.min.js" type="text/javascript"></script>
    <script src="/js/assets/modernizr-2.8.3.min.js" type="text/javascript"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>

          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

        <![endif]-->
    <style>
        .items {
            width: 440px;
            /*height: 400px;*/
            margin: 0 8px 10px 0;
            padding: 10px;
            text-align: center;
            float: left;
            display: none;
            border: .5px solid #DDD;
            background: #EEE;
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
            -webkil-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        }

            .items img {
                /*width: 400px;
            height: 400px;*/
            }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#search_input").keyup(function (e) {
                var curKey = e.which;
                if (curKey == 13) {
                    query();
                }
            })
        });
        function query() {
            $.ajax({
                type: 'GET',
                dataType: 'JSON',
                url: '/Home/GetImageListFromPixabay',
                //url: '/Home/GetImageListFromUnsplash',
                data: {
                    keyword: $("#search_input").val()
                },
                success: function (data) {
                    if (data.Total > 0) {
                        $('#imageList').masonry();
                        $('#imageList').masonry('destroy');
                        document.getElementById('imageList').innerHTML = null;
                        var html = "";
                        $.each(data.ImageList, function (i, item) {
                            html += '<li class="items masonry-item grid " >';
                            html += '<figure class="effect-sarah">';
                            html += '<img src="' + item.Url_Small + '" alt="" class="animate tada" />';
                            html += '</figure>';
                            html += '</li>';
                        });
                        document.getElementById('imageList').innerHTML = html;

                        $('#imageList .items').imagesLoaded(function () {
                            $('#imageList .items').fadeIn();
                            $('#imageList').masonry(
                                {
                                    itemSelector: '.items',
                                    isAnimated: true,
                                });
                        });
                        //$('#imageList').imagesLoaded(function () {
                        //    $('#imageList').masonry(

                        //        {
                        //            itemSelector: '.items',
                        //            isAnimated: true,
                        //        });
                        //});
                    }
                }
            })
        }

    </script>
</head>
<body style="background-color:#006699; background:#ddd url(/images/bg.jpg) repeat">
    <!-- header -->
    <header id="header" class="header">
        <div class="container-fluid" style="display:flex">
            <a href="index1.html" title="TuiTuJun">
                <img style="display:inline;display :-webkit-inline-box" src="/images/logo2.png" alt="TuiTuJun" title="TuiTuJun" />
            </a>
            <input style="flex:1;margin-left:20px" type="text" name="search_input" id="search_input" placeholder="图片关键字" />
            <button type="button" onclick="query()">搜索</button>
        </div>
    </header>
    <!-- header -->
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/">企业网站模板</a></div>
    <!-- image Gallery -->
    <div class="wrapper" id="container" style="background-color:#006699; background:#ddd url(/images/bg.jpg) repeat">
        <ul id="imageList">
            @*<li class="masonry-item grid">
                    <figure class="effect-sarah">
                        <img src="/images/gallery/01.jpg" alt="" />
                        <figcaption>
                                <h2>Photo <span>Title</span></h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                <a href="details.html">View more</a>
                            </figcaption>
                    </figure>
                </li>*@
        </ul>
    </div>
    <!-- Image Gallery -->
    <!-- footer -->
    <footer class="footer">
        <h3>Stay connected with us</h3>
        <div class="container footer-bot">
            <div class="row">
                <!-- logo -->
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <img src="/images/footer-logo.png" alt="Picxa" title="Picxa" />
                    <p class="copy-right">&copy; Reserved Picxa inc 2016.</p>
                </div>
                <!-- logo -->
                <!-- address -->
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top">
                    <address>
                        <p>200 Broadway Av</p>
                        <p>West Beach SA 5024  Australia</p>
                    </address>
                </div>
                <!-- address -->
                <!-- email -->
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top">
                    <p><a href="mailto:contact@Picxa.com">contact@Picxa.com</a></p>
                    <p>01 (2) 34 56 78</p>
                </div>
                <!-- email -->
                <!-- social -->
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top">
                    <ul class="social">
                        <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-tripadvisor" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
                        <li><a href="#"><i class="fa fa-delicious" aria-hidden="true"></i></a></li>
                    </ul>
                    <p class="made-by">Made with by <i class="fa fa-heart" aria-hidden="true"></i> <a href="http:///" target="_blank">Designstub</a>
                    <p>
                </div>
                <!-- social -->
            </div>
        </div>
    </footer>
    <!-- footer -->
</body>
</html>